<template>
  <div class="not-found-container">
    <div class="not-found-content">
      <!-- 404 图标（可替换为 SVG 或图片） -->
      <div class="not-found-icon">
        <span>4</span>
        <span class="zero">0</span>
        <span>4</span>
      </div>

      <h1 class="not-found-title">页面不存在</h1>
      <p class="not-found-desc">
        您访问的页面可能已被删除、更名或暂时不可用
      </p>

      <!-- 返回首页按钮（带 hover 动画） -->
      <router-link to="/" class="not-found-button">
        返回首页
      </router-link>

      <!-- 额外帮助链接 -->
      <div class="not-found-links">
        <a @click="goBack">返回上一页</a>
        <a href="mailto:support@example.com">联系支持</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 返回上一页
const goBack = () => {
  if (window.history.state?.back) {
    router.go(-1);
  } else {
    router.push('/'); // 如果没有历史记录，则返回首页
  }
};
</script>

<style scoped>
.not-found-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.not-found-content {
  text-align: center;
  max-width: 600px;
  padding: 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.6s ease-out;
}

.not-found-icon {
  font-size: 120px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.not-found-icon .zero {
  color: #42b983; /* Vue 主题色 */
  transform: rotate(15deg);
  display: inline-block;
}

.not-found-title {
  font-size: 32px;
  margin-bottom: 16px;
  color: #2c3e50;
}

.not-found-desc {
  font-size: 18px;
  color: #7f8c8d;
  margin-bottom: 30px;
}

.not-found-button {
  display: inline-block;
  padding: 12px 30px;
  background: #42b983;
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(66, 185, 131, 0.3);
}

.not-found-button:hover {
  background: #3aa876;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 185, 131, 0.4);
}

.not-found-links {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.not-found-links a {
  color: #42b983;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}

.not-found-links a:hover {
  color: #3aa876;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式适配 */
@media (max-width: 600px) {
  .not-found-icon {
    font-size: 80px;
  }
  .not-found-title {
    font-size: 24px;
  }
  .not-found-desc {
    font-size: 16px;
  }
}
</style>